<template>
  <div class="logo">
    <transition enter-active-class="animate__animated animate__fadeInLeft">
      <div class="wh-full flex-center" @click="goHome">
        <img :src="logo" class="logoImg" />
        <span v-if="!collapse" class="title">
          {{ defaultSettings.title }}
        </span>
      </div>
    </transition>
  </div>
</template>

<script setup>
import defaultSettings from '@/settings'
import logo from '@/assets/images/logo.png'

defineProps({
  collapse: {
    type: Boolean,
    required: true,
  }
});
const router = useRouter()
const goHome = () => {
  router.push('/home')
}
</script>

<style lang="scss" scoped>
.logo {
  width: 100%;
  height: $navbar-height;
  background-color: $sidebar-logo-background;

  .logoImg {
    width: 20px;
    height: 20px;
  }

  .title {
    flex-shrink: 0; /* 防止容器在空间不足时缩小 */
    margin-left: 10px;
    font-size: 14px;
    font-weight: bold;
    color: white;
  }
}

.layout-top,
.layout-mix {
  .logo {
    width: $sidebar-width;
  }

  &.hideSidebar {
    .logo {
      width: $sidebar-width-collapsed;
    }
  }
}
</style>
